<div class="flex items-end rounded-[2rem] p-2 active:scale-[.99] active:translate-y-0.5 transition-all
  bg-black/5 dark:bg-white/10 active:bg-black/10 active:dark:bg-white/5"
  (click)="userInput.focus()"
 >
  <textarea #userInput matInput class="ngm-colpilot__input flex-1 w-full px-1.5 m-2 z-10 resize-none overflow-visible"
    id="userInput"
    [placeholder]="'PAC.Chat.MessageDigitalExpert' | translate: {Default: 'Message digital expert'}"
    [formControl]="promptControl"
    (keydown)="triggerFun($event)"

    cdkTextareaAutosize
    cdkAutosizeMinRows="1"
    cdkAutosizeMaxRows="5"
  >
  </textarea>

  <div class="flex items-center gap-2">
    @if (answering()) {
      <button type="button" class="w-10 h-10 flex justify-center items-center rounded-full md:bottom-3 md:right-3 right-2 border-solid p-1 hover:opacity-60 text-white bg-black dark:bg-white dark:text-black"
        (click)="stopGenerating()">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="icon-lg">
          <rect width="10" height="10" x="7" y="7" fill="currentColor" rx="1.25"></rect>
        </svg>
      </button>
    } @else {
      <button type="button" class="w-10 h-10 flex justify-center items-center rounded-full md:bottom-3 md:right-3 right-2 border-solid p-1
         bg-black disabled:opacity-10 disabled:text-gray-400 enabled:bg-black text-white dark:border-white dark:bg-white bottom-1.5 transition-colors
        hover:opacity-60"
        [disabled]="!prompt() || disabled()"
        (click)="send()"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-white dark:text-black">
          <path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    }
  </div>
</div>

<p class="w-full px-2 py-2 text-center text-xs text-token-text-secondary empty:hidden md:px-[60px]">{{'Digital expert can make mistakes. Check important info.'}}</p>
